@import "~styles/util.less";

.main {
    position: absolute;
    width: 750px;
    height: 100%;
    background-color: #F5F5F5;
    padding-top: 70px;
    box-sizing: border-box;
    padding-bottom: 108px;

    .nodata {
        font-size: 24px;
        color: rgba(34, 33, 45, 0.6);
        padding-bottom: 30px;
    }

    .collections {
        padding-top: 1px;
        background-color: #fff;

        .collectionsTitle {
            font-size: 28px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            color: rgba(34, 33, 45, 1);
            margin-top: 40px;
            margin-left: 30px;
        }

        .collectionsContent {
            width: 598px;
            margin-left: 60px;
            margin-top: 40px;

            .collectionsItemContainer {
                position: relative;
                padding-bottom: 30px;

                .collectionsItemBigPoint {
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    background: rgb(232, 232, 233);
                    left: 0;
                    top: 28px;
                    border-radius: 50%;
                }

                .collectionsItemSmallPoint {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    background: rgba(34, 33, 45, 1);
                    left: 5px;
                    top: 33px;
                    border-radius: 50%;
                }

                .collectionsItemLine {
                    width: 2px;
                    height: 100%;
                    position: absolute;
                    top: 39px;
                    left: 11px;
                    background: rgba(34, 33, 45, 1);
                    z-index: 1;
                }

                &:last-child {
                    .collectionsItemLine {
                        display: none;
                    }
                }

                .collectionsItem {
                    margin-left: 58px;
                    width: 540px;
                    box-sizing: border-box;
                    padding: 20px;
                    background: rgb(232, 232, 233);
                    border-radius: 4px;
                    position: relative;

                    .collectionsItemArrow {
                        width: 15px;
                        height: 15px;
                        background: rgb(232, 232, 233);
                        transform: rotate(45deg);
                        position: absolute;
                        left: -7px;
                        top: 33px;
                    }

                    .collectionsItemWrapper {
                        .collectionsItemTitle {
                            display: flex;
                            align-items: center;
                            line-height: 0;
                            position: relative;

                            .collectionsItemTitleTime {
                                background: rgba(248, 101, 53, 1);
                                border-radius: 2px;
                                padding: 0px 6px;
                                font-size: 24px;
                                font-family: PingFangSC-Semibold;
                                font-weight: 600;
                                color: rgba(255, 255, 255, 1);
                                height: 27px;
                                line-height: 1.2;
                                margin-right: 10px;
                            }

                            .collectionsItemTitleText {
                                font-size: 28px;
                                font-family: PingFangSC-Semibold;
                                font-weight: 600;
                                color: rgba(34, 33, 45, 1);
                                line-height: 1.2;
                                width: 476px;
                            }

                            .collectionsItemMore {
                                position: absolute;
                                right: 0;
                                top: 50%;
                                transform-origin: center;
                                transform: translateY(-50%) rotate(0deg);
                                transition: all .3s ease 0s;

                                &.show {
                                    transform: translateY(-50%) rotate(180deg);
                                }
                            }
                        }

                        .collectionsItemContent {
                            max-height: 0;
                            overflow: hidden;
                            position: relative;

                            .remindMe {
                                font-size: 22px;
                                font-family: PingFangSC;
                                font-weight: 400;
                                color: #A8A7B1;
                                line-height: 30px;
                                position: absolute;
                                right: 10px;
                                bottom: 0;

                                &.noticeMe{
                                    color: rgba(255, 83, 27, 1);
                                }
                            }

                            .collectionsItemContentText {
                                font-size: 24px;
                                font-family: PingFangSC-Regular;
                                font-weight: 400;
                                color: rgba(34, 33, 45, 0.6);
                                line-height: 30px;

                                &>div {
                                    margin-top: 14px;
                                    margin-bottom: 40px;
                                }
                            }



                            &.show {
                                max-height: 1000px;
                            }
                        }
                    }
                }
            }
        }
    }

    .collectionForToday {
        margin-top: 10px;
    }
}

.dateSwiper {
    width: 100%;
    height: 70px;
    background-color: rgba(34, 33, 45, 1);
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
    overflow: hidden;

    .dateSwiperContainer {
        position: relative;
        height: 70px;

        :global {
            .swiper-wrapper {
                .swiper-slide {
                    width: 125px;
                    height: 70px;
                    text-align: center;

                    span {
                        color: #fff;
                        display: inline-block;
                        height: 100%;
                        line-height: 70px;
                        text-align: center;
                        font-size: 24px;
                        font-family: PingFangSC-Semibold;
                        font-weight: 600;
                        color: rgba(255, 255, 255, 0.7);
                        position: relative;
                    }

                    &.swiper-slide-active {
                        span {
                            color: rgba(255, 255, 255, 1);

                            &::after {
                                content: "";
                                position: absolute;
                                width: 100%;
                                height: 6px;
                                background-color: rgba(248, 101, 53, 1);
                                bottom: 0;
                                left: 0;
                            }
                        }
                    }
                }
            }
        }

        .dateSwiperLayer {
            width: 100px;
            height: 70px;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(49, 51, 66, 0.7) 66%, rgba(18, 18, 19, 1) 97%);
        }
    }
}